<template>
  <div class="icons">
    <swiper>
      <swiper-slide v-for="one of pages" :key="one.id">
        <div class="icon" v-for="item of one" :key="item.id">
          <div>
            <img :src="item.imgUrl" alt />
          </div>
          <p>{{item.desc}}</p>
        </div>
      </swiper-slide>
    </swiper>
  </div>
</template>
<script>
export default {
  name: "icons",
  data() {
    return {
      iconList: [
        {
          id: "0001",
          imgUrl:
            "http://img1.qunarzz.com/piao/fusion/1804/5a/13ceb38dcf262f02.png",
          desc: "景点门票"
        },
        {
          id: "0002",
          imgUrl:
            "http://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20193/a40ee278d67000f2a29d2e20f6a029b3.png",
          desc: "自然风光"
        },
        {
          id: "0003",
          imgUrl:
            "http://img1.qunarzz.com/piao/fusion/1803/95/8246f27355943202.png",
          desc: "游乐场"
        },
        {
          id: "0004",
          imgUrl:
            "http://img1.qunarzz.com/piao/fusion/1804/5a/13ceb38dcf262f02.png",
          desc: "景点门票"
        },
        {
          id: "0005",
          imgUrl:
            "http://img1.qunarzz.com/piao/fusion/1804/5a/13ceb38dcf262f02.png",
          desc: "景点门票"
        },
        {
          id: "0006",
          imgUrl:
            "http://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20193/a40ee278d67000f2a29d2e20f6a029b3.png",
          desc: "自然风光"
        },
        {
          id: "0007",
          imgUrl:
            "http://img1.qunarzz.com/piao/fusion/1803/95/8246f27355943202.png",
          desc: "游乐场"
        },
        {
          id: "0008",
          imgUrl:
            "http://img1.qunarzz.com/piao/fusion/1804/5a/13ceb38dcf262f02.png",
          desc: "景点门票"
        },
        {
          id: "0009",
          imgUrl:
            "http://img1.qunarzz.com/piao/fusion/1804/5a/13ceb38dcf262f02.png",
          desc: "景点门票"
        },
        {
          id: "0010",
          imgUrl:
            "http://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20193/a40ee278d67000f2a29d2e20f6a029b3.png",
          desc: "自然风光"
        },
        {
          id: "0011",
          imgUrl:
            "http://img1.qunarzz.com/piao/fusion/1803/95/8246f27355943202.png",
          desc: "游乐场"
        },
        {
          id: "0012",
          imgUrl:
            "http://img1.qunarzz.com/piao/fusion/1804/5a/13ceb38dcf262f02.png",
          desc: "景点门票"
        }
      ]
    };
  },
  computed: {
    pages(){
      const pages=[];
      this.iconList.forEach((one,idx)=>{
        const index = Math.floor(idx/8);
        if(!pages[index]){
          pages[index] = [];
        }
        pages[index].push(one)
      })
      return pages
    }
  }
};
</script>
<style lang="stylus" scoped>
@import '~@/assets/common/commonstyl/common.styl';

.icons >>> .swiper-container {
  width: 100%;
}
.icons {
  width: 100%;
  height: 50vw;
  .swiper-slide {
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    flex-wrap: wrap;
    .icon {
      width: 25%;
      height: 25vw;

      >div {
        height: 80%;
        text-align: center;

        img {
          height: 100%;
        }
      }

      >P {
        text-align: center;
        color: $darkTextColor;
      }
    }
  }
}
</style>